

// 导入中间连接mobx react完成响应式变化
import { observer } from "mobx-react-lite"
import { useStore } from "./store/index"
function App () {
  const rootStore = useStore()
  /**
   *  也可以解构赋值 
   *  注意：解构赋值道store实例对象就可以了 防止破坏响应式
   *  用哪个store就解构哪个store
   *  const {counterStore} = useStore()
   */
  console.log(rootStore, 'rootStore')
  return (
    <div className="App">
      {/* 把store中的count渲染一下 */}
      {rootStore.counterStore.count}<br />
      {rootStore.listStore.list.join('-')}<br />
      {/* 点击事件触发action函数修改count值 */}
      <button onClick={rootStore.counterStore.addCount}>点击加一</button><br />
      <button onClick={rootStore.listStore.addList}>修改数组</button>
    </div>
  )
}
// 包裹App
export default observer(App)
